<template>
    <div>
        <div v-if="proxyData">
            <el-divider content-position="left" v-if="proxyData.tag === 'Flow'"
                >自动布局</el-divider
            >
            <div class="px-2" v-if="proxyData.tag === 'Flow'">
                <div>
                    <el-radio-group
                        size="small"
                        class="mr-2"
                        v-model="proxyData.flow"
                        @change="handleFlowChange"
                    >
                        <el-radio-button label="横向" value="x" />
                        <el-radio-button label="纵向" value="y" />
                    </el-radio-group>
                </div>
                <div class="mt-2">
                    <el-radio-group
                        size="small"
                        class="mr-2"
                        v-model="(proxyData.gap as string)"
                        @change="handleFlowChange"
                    >
                        <el-radio-button label="auto" value="auto" />
                        <el-radio-button label="fit" value="fit" />
                    </el-radio-group>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        v-model="(proxyData.gap as number)"
                    >
                        <template #prefix>
                            <span>GAP</span>
                        </template>
                    </el-input-number>
                </div>
                <div>
                    <el-radio-group
                        size="small"
                        class="mr-2"
                        v-model="(proxyData.flowAlign as string)"
                        @change="handleFlowChange"
                    >
                        <el-radio-button label="左上" value="top-left" />
                        <el-radio-button label="上" value="top" />
                        <el-radio-button label="右上" value="top-right" />
                    </el-radio-group>
                    <div>
                        <el-radio-group
                            size="small"
                            class="mr-2"
                            v-model="(proxyData.flowAlign as string)"
                            @change="handleFlowChange"
                        >
                            <el-radio-button label="左" value="left" />
                            <el-radio-button label="中" value="center" />
                            <el-radio-button label="右" value="right" />
                        </el-radio-group>
                    </div>

                    <el-radio-group
                        size="small"
                        class="mr-2"
                        v-model="(proxyData.flowAlign as string)"
                        @change="handleFlowChange"
                    >
                        <el-radio-button label="左下" value="bottom-left" />
                        <el-radio-button label="下" value="bottom" />
                        <el-radio-button label="右下" value="bottom-right" />
                    </el-radio-group>
                </div>
                <div class="mt-2">
                    <div>
                        <el-radio-group
                            size="small"
                            v-model="(proxyData as Flow).flowWrap"
                        >
                            <el-radio-button label="不换行" :value="false" />
                            <el-radio-button label="自动换行" :value="true" />
                        </el-radio-group>
                    </div>
                </div>
            </div>
            <el-divider content-position="left">属性</el-divider>
            <div class="px-2">
                <div>
                    <el-input
                        size="small"
                        c
                        class="mr-2"
                        disabled
                        v-model="proxyData.innerId"
                    >
                        <template #prefix>
                            <span>innerId</span>
                        </template>
                    </el-input>
                </div>
                <div class="mt-2">
                    <el-input
                        size="small"
                        c
                        class="mr-2"
                        v-model="proxyData.name"
                        clearable
                    >
                        <template #prefix>
                            <span>name</span>
                        </template>
                    </el-input>
                </div>
                <div class="mt-2">
                    <el-input
                        size="small"
                        c
                        class="mr-2"
                        v-model="proxyData.className"
                        clearable
                    >
                        <template #prefix>
                            <span>className</span>
                        </template>
                    </el-input>
                </div>
            </div>
            <el-divider content-position="left">几何属性</el-divider>
            <div class="px-2">
                <div>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        class="mr-2"
                        v-model="proxyData.x"
                    >
                        <template #prefix>
                            <span>X</span>
                        </template>
                    </el-input-number>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        v-model="proxyData.y"
                    >
                        <template #prefix>
                            <span>Y</span>
                        </template>
                    </el-input-number>
                </div>
                <div class="mt-2">
                    <el-input-number
                        size="small"
                        controls-position="right"
                        class="mr-2"
                        v-model="proxyData.width"
                    >
                        <template #prefix>
                            <span>W</span>
                        </template>
                    </el-input-number>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        v-model="proxyData.height"
                    >
                        <template #prefix>
                            <span>H</span>
                        </template>
                    </el-input-number>
                </div>
                <div class="mt-2">
                    <el-input-number
                        size="small"
                        controls-position="right"
                        class="mr-2"
                        v-model="(proxyData.autoWidth as number)"
                    >
                        <template #prefix>
                            <span>AW</span>
                        </template>
                    </el-input-number>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        v-model="(proxyData.autoHeight as number)"
                    >
                        <template #prefix>
                            <span>AH</span>
                        </template>
                    </el-input-number>
                </div>
                <div class="mt-2">
                    <el-input-number
                        size="small"
                        controls-position="right"
                        class="mr-2"
                        v-model="(proxyData.rotation as number)"
                    >
                        <template #prefix>
                            <span>R</span>
                        </template>
                    </el-input-number>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        class="mr-2"
                        v-model="(proxyData.cornerRadius as number)"
                    >
                        <template #prefix>
                            <span>CR</span>
                        </template>
                    </el-input-number>
                </div>
                <div class="mt-2">
                    <div class="flex justify-center">
                        <el-input
                            size="small"
                            controls-position="right"
                            class="mr-2 w-[80px]"
                            v-model="padding[0]"
                        >
                            <template #prefix>
                                <span>PT</span>
                            </template>
                        </el-input>
                    </div>
                    <div class="flex justify-between px-4">
                        <el-input
                            size="small"
                            controls-position="right"
                            class="mr-2 w-[80px]"
                            v-model="padding[3]"
                        >
                            <template #prefix>
                                <span>PL</span>
                            </template>
                        </el-input>
                        <el-input
                            size="small"
                            controls-position="right"
                            class="mr-2 w-[80px]"
                            v-model="padding[1]"
                        >
                            <template #prefix>
                                <span>PR</span>
                            </template>
                        </el-input>
                    </div>
                    <div class="flex justify-center">
                        <el-input
                            size="small"
                            controls-position="right"
                            class="mr-2 w-[80px]"
                            v-model="padding[2]"
                        >
                            <template #prefix>
                                <span>PB</span>
                            </template>
                        </el-input>
                    </div>
                </div>
            </div>
            <el-divider content-position="left" v-if="proxyData.tag === 'Text'"
                >文本属性</el-divider
            >
            <div class="px-2" v-if="proxyData.tag === 'Text'">
                <div class="flex">
                    <el-input
                        size="small"
                        class="mr-2 w-7/10"
                        v-model="(proxyData as Text).fontFamily"
                    >
                        <template #prefix>
                            <span>字体</span>
                        </template>
                    </el-input>
                    <el-input-number
                        size="small"
                        controls-position="right"
                        v-model="(proxyData as Text).fontSize"
                    >
                        <template #prefix>
                            <span>FS</span>
                        </template>
                    </el-input-number>
                </div>
                <div class="flex">
                    <el-input-number
                        size="small"
                        controls-position="right"
                        v-model="((proxyData as any).lineHeight.value)"
                    >
                        <template #prefix>
                            <span>LH</span>
                        </template>
                    </el-input-number>
                </div>
                <div class="mt-2">
                    <el-radio-group
                        size="small"
                        class="mr-2"
                        v-model="(proxyData as Text).textAlign"
                    >
                        <el-radio-button label="左" value="left" />
                        <el-radio-button label="中" value="center" />
                        <el-radio-button label="右" value="right" />
                    </el-radio-group>
                    <el-radio-group
                        size="small"
                        v-model="(proxyData as Text).verticalAlign"
                    >
                        <el-radio-button label="上" value="top" />
                        <el-radio-button label="中" value="middle" />
                        <el-radio-button label="下" value="bottom" />
                    </el-radio-group>
                </div>
                <div class="mt-2">
                    <el-radio-group
                        size="small"
                        class="mr-2"
                        v-model="(proxyData as Text).textWrap"
                    >
                        <el-radio-button label="正常" value="normal" />
                        <el-radio-button label="不换行" value="none" />
                        <el-radio-button label="截断" value="break" />
                    </el-radio-group>
                </div>
            </div>
            <el-divider
                content-position="left"
                v-if="proxyData.tag === 'HTMLText' || proxyData.tag === 'Text'"
                >内容</el-divider
            >
            <div
                class="px-2 mt-2"
                v-if="proxyData.tag === 'HTMLText' || proxyData.tag === 'Text'"
            >
                <div>
                    <el-input
                        type="textarea"
                        v-model="((proxyData as Text).text)"
                    />
                </div>
            </div>
            <template v-if="proxyData.tag !== 'HTMLText'">
                <el-divider content-position="left">填充</el-divider>
                <div class="px-2">
                    <div>
                        <el-color-picker
                            show-alpha
                            size="small"
                            v-model="(proxyData.fill as string)"
                        />
                    </div>
                </div>
            </template>

            <el-divider content-position="left">描边</el-divider>
            <div class="px-2">
                <div class="flex items-center">
                    <el-color-picker
                        show-alpha
                        class="mr-2"
                        size="small"
                        v-model="(proxyData.stroke as string)"
                    />
                    <el-input-number
                        size="small"
                        controls-position="right"
                        class="mr-2"
                        v-model="(proxyData.strokeWidth as number)"
                    >
                        <template #prefix>
                            <span>SW</span>
                        </template>
                    </el-input-number>
                    <el-radio-group
                        size="small"
                        v-model="proxyData.strokeAlign"
                    >
                        <el-radio-button label="外" value="outside" />
                        <el-radio-button label="中" value="center" />
                        <el-radio-button label="内" value="inside" />
                    </el-radio-group>
                </div>
            </div>
        </div>
        <el-divider content-position="left">其他属性</el-divider>
        <div class="px-2">
            <div v-if="proxyData?.tag === 'Box'">
                <el-radio-group
                    size="small"
                    v-model="(proxyData as Box).overflow"
                >
                    <el-radio-button label="溢出隐藏" value="hide" />
                    <el-radio-button label="溢出显示" value="show" />
                </el-radio-group>
            </div>
        </div>
        <el-divider content-position="left">功能</el-divider>
        <div class="px-2">
            <div>
                <el-button size="small" @click="emit('copy')">复制</el-button>
                <el-button size="small" @click="emit('delete')">删除</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Flow } from '@leafer-in/flow'
import type { Box, IUI, Text } from 'leafer-ui'
import { ref, watch } from 'vue'

const props = defineProps<{
    editorSelected: IUI[]
}>()

const emit = defineEmits(['copy', 'delete'])

const proxyData = ref<IUI | Text | Box | null>(null)

const padding = ref([0, 0, 0, 0])

watch(
    () => padding.value,
    (newVal) => {
        if (proxyData.value) {
            proxyData.value.padding = newVal.map((v) => +v)
            proxyData.value.forceUpdate()
        }
    },
    { deep: true }
)

const handleFlowChange = () => {
    props.editorSelected[0].forceUpdate()
}

watch(
    () => props.editorSelected,
    (newVal) => {
        console.log(newVal)
        if (newVal.length === 1) {
            proxyData.value = newVal[0]
            padding.value = (newVal[0].proxyData?.padding as number[]) || [
                0, 0, 0, 0,
            ]
        } else {
            proxyData.value = null
        }
    }
)
</script>

<style scoped></style>
